<template>
    <cl-crud ref="Crud">
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key placeholder="搜索指标名称、指标id" />
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table">
                <template #column-time_label="{ scope }">
                    <span>{{moment(scope.row.time_label).format('yyyy-MM-DD')}}</span>
                </template>
            </cl-table>
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="user-list" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
moment.locale('zh-cn');
const { service } = useCool();

// cl-table
const Table = useTable({
	columns: [
		{
			type: 'selection',
			width: 60
		},
		{
			label: '指标id',
			prop: 'metric'
		},
		{
			label: '指标名称',
			prop: 'name',
			minWidth: 200
		},
		{
			label: '数据时间',
			prop: 'time_label'
		},
		{
			label: '度量值',
			prop: 'metric_value'
		},
		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 150
		},
		{
			label: '修改时间',
			prop: 'updateTime',
			sortable: 'desc',
			minWidth: 150
		},
		{ label: '操作', type: 'op', buttons: ['delete'] }
	]
});
// cl-upsert
const Upsert = useUpsert({});

// cl-crud
const Crud = useCrud(
	{
		service: service.user.analysis
	},
	app => {
		app.refresh();
	}
);
</script>
